<!-- 权限配置 -->
<template>
  <a-layout-content style="margin: 0 16px">
    <!-- <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
      quanxinaguanli
    </div> -->
    <div ref="container" class="graph-container"></div>
    <div
      id="infoBox"
      style="
        display: none;
        position: absolute;
        background: white;
        border: 1px solid #ccc;
        padding: 10px;
        z-index: 1000;
      "
    >
      <!-- 详细信息将在这里动态生成 -->
    </div>
  </a-layout-content>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { Graph, Cell } from "@antv/x6";
import "@antv/x6/dist/index.css";

const container = ref(null);

onMounted(() => {
  initGraph();
});

const dataList = reactive([
  {
    id: "1",
    shape: "event",
    width: 40,
    height: 40,
    position: {
      x: 50,
      y: 180,
    },
  },
  {
    id: "2",
    shape: "activity",
    width: 100,
    height: 60,
    position: {
      x: 20,
      y: 280,
    },
    label: "请假申请",
  },
  {
    id: "3",
    shape: "bpmn-edge",
    source: "1",
    target: "2",
  },
  {
    id: "4",
    shape: "gateway",
    width: 55,
    height: 55,
    position: {
      x: 170,
      y: 282.5,
    },
  },
  {
    id: "5",
    shape: "bpmn-edge",
    source: "2",
    target: "4",
  },
  {
    id: "6",
    shape: "activity",
    width: 100,
    height: 60,
    position: {
      x: 300,
      y: 240,
    },
    label: "领导审批",
  },
  {
    id: "7",
    shape: "activity",
    width: 100,
    height: 60,
    position: {
      x: 300,
      y: 320,
    },
    label: "人事审批",
  },
  {
    id: "8",
    shape: "bpmn-edge",
    source: "4",
    target: "6",
  },
  {
    id: "9",
    shape: "bpmn-edge",
    source: "4",
    target: "7",
  },
  {
    id: "10",
    shape: "gateway",
    width: 55,
    height: 55,
    position: {
      x: 460,
      y: 282.5,
    },
  },
  {
    id: "11",
    shape: "bpmn-edge",
    source: "6",
    target: "10",
  },
  {
    id: "12",
    shape: "bpmn-edge",
    source: "7",
    target: "10",
  },
  {
    id: "13",
    shape: "activity",
    width: 100,
    height: 60,
    position: {
      x: 560,
      y: 280,
    },
    attrs: {
      body: {
        strokeWidth: 4,
        stroke: "#0f0f",
        fill: "#FFF",
      },
    },
    label: "人事审批",
  },
  {
    id: "14",
    shape: "bpmn-edge",
    source: "10",
    target: "13",
  },
  {
    id: "15",
    shape: "event",
    width: 40,
    height: 40,
    position: {
      x: 710,
      y: 290,
    },
    attrs: {
      body: {
        strokeWidth: 4,
        stroke: "#0ff",
        fill: "#FFF",
      },
    },
  },
  {
    id: "16",
    shape: "bpmn-edge",
    source: "13",
    target: "15",
  },
]);

const initGraph = () => {
  const graphContainer = container.value;

  const graph = new Graph({
    container: graphContainer,
    width: 800,
    height: 600,
    grid: true,
    background: {
      color: "#F2F7FA",
    },
    connecting: {
      router: "orth",
    },
  });

  const cells = [];
  dataList.forEach((item) => {
    if (item.shape === "bpmn-edge") {
      cells.push(graph.createEdge(item));
    } else {
      cells.push(graph.createNode(item));
    }
  });
  graph.resetCells(cells);
  graph.zoomToFit({ padding: 10, maxScale: 1 });
  // 添加悬浮事件
  graph.on("cell:mouseenter", ({ e,cell, view }) => {
    console.log( cell, "cell");
    console.log(e,'eeeeeeeeeeee');
    console.log(view,'view');
    if (cell.isNode()) {
      const nodeData = cell.prop("data"); // 获取节点数据
      showNodeInfo(nodeData, view, e); // 显示节点详细信息
    }
  });

  graph.on("node:mouseleave", ({ cell, view }) => {
    if (cell.isNode()) {
      hideNodeInfo(); // 隐藏节点详细信息
    }
  });
};
// 显示节点详细信息的函数
const showNodeInfo = (nodeData, cellView, e) => {
  const graphContainer = container.value;
  const infoBox = document.getElementById("infoBox");
  if (infoBox) {
    infoBox.style.display = "block";
    infoBox.innerHTML = `
         <h3>Node Details</h3>
         <p>ID: nodeData.id}</p>
         <p>Type: nodeData.shape}</p>
         <p>Name:{nodeData.label || '无'}</p>
         <!-- 其他详细信息 -->
       `;

    // 计算节点的位置
    const bbox = cellView.getBBox();
    const containerRect = graphContainer.getBoundingClientRect(); // 获取 infoBox 的尺寸
    const infoBoxRect = infoBox.getBoundingClientRect();

    // 计算相对于容器的位置
    const offsetX = bbox.x + containerRect.left;
    const offsetY = bbox.y  + containerRect.top;
    // 计算 infoBox 的最终位置
    let left = offsetX;
    let top = offsetY;

    // 检查右边界
    if (left + infoBoxRect.width > containerRect.width) {
      left = containerRect.width - infoBoxRect.width;
    }

    // 检查左边界
    if (left < 0) {
      left = 0;
    }

    // 检查下边界
    if (top + infoBoxRect.height > containerRect.height) {
      top = containerRect.height - infoBoxRect.height;
    }

    // 检查上边界
    if (top < 0) {
      top = 0;
    }

    // console.log(offsetX, offsetY, "ssss");
    // 设置 infoBox 的位置
    infoBox.style.left = `${left + e.offsetX/5}px`;
    infoBox.style.top = `${top + e.offsetY/6}px`;
  }
};

// 隐藏节点详细信息的函数
const hideNodeInfo = () => {
  const infoBox = document.getElementById("infoBox");
  if (infoBox) {
    infoBox.style.display = "none";
  }
};
Graph.registerNode(
  "event",
  {
    inherit: "circle",
    attrs: {
      body: {
        strokeWidth: 2,
        stroke: "#f0f",
        fill: "#FFF",
      },
    },
  },
  true
);

Graph.registerNode(
  "activity",
  {
    inherit: "rect",
    markup: [
      {
        tagName: "rect",
        selector: "body",
      },
      {
        tagName: "image",
        selector: "img",
      },
      {
        tagName: "text",
        selector: "label",
      },
    ],
    attrs: {
      body: {
        rx: 6,
        ry: 6,
        stroke: "#ff0",
        fill: "#EFF4FF",
        strokeWidth: 1,
      },
      img: {
        x: 6,
        y: 6,
        width: 16,
        height: 16,
        "xlink:href":
          "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*pwLpRr7QPGwAAAAAAAAAAAAAARQnAQ",
      },
      label: {
        fontSize: 12,
        fill: "#262626",
      },
    },
  },
  true
);

Graph.registerNode(
  "gateway",
  {
    inherit: "polygon",
    attrs: {
      body: {
        refPoints: "0,10 10,0 20,10 10,20",
        strokeWidth: 2,
        stroke: "#5F95FF",
        fill: "#EFF4FF",
      },
      label: {
        text: "+",
        fontSize: 40,
        fill: "#5F95FF",
      },
    },
  },
  true
);

Graph.registerEdge(
  "bpmn-edge",
  {
    inherit: "edge",
    attrs: {
      line: {
        stroke: "#A2B1C3",
        strokeWidth: 2,
      },
    },
  },
  true
);
</script>

<style scoped>
.graph-container {
  position: relative; /* 确保容器有相对定位 */
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}
#infoBox {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>